<template>
  <div class="hello">
    <App></App>
    <!--顶部标题栏-->
    <x-header :left-options="{showBack: false}">我的<a slot="right" @click="toAccountSet">设置</a></x-header>
    <div style="text-align: center;background-color: #fff;">
      <img style="" src="/src/assets/images/account/account_head.jpeg" style="width:50%">
      <h2>佛若星辰</h2>
    </div>

    <card :header="{title: '我的账户：1385****793'}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r"  @click="toApiMyCall">
          <span>1130</span>
          <br/>
          我的调用量
        </div>
        <div @click="toAccountMessage">
          <span>15</span>
          <br/>
          我的消息
        </div>
      </div>
    </card>

    <div style="margin: 10px;overflow: hidden;">
      <masker style="border-radius: 2px;" color="333" :opacity="0.3">
        <div class="m-img" style="background-image:url(/src/assets/images/account/account_moni.jpeg)"></div>
        <div slot="content" class="m-title">
          开启智能监控服务
          <br/>
          <span class="m-time">2016-03-18</span>
        </div>
      </masker>
    </div>

    <group title="功能">
      <cell title="我的接口" is-link @click.native="toApiMy">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="/src/assets/images/account/account_api.png">
      </cell>
      <cell title="我的申请" is-link @click.native="toApiApplyMy">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="/src/assets/images/account/account_apply.png">
      </cell>
      <cell title="我的收藏" is-link @click.native="toApiLike">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="/src/assets/images/account/account_collection.png">
      </cell>
      <cell title="我要反馈" is-link @click.native="toAccountBack">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="/src/assets/images/account/account_back.png">
      </cell>
      <cell title="关于我们" is-link @click.native="toAccountAbout">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="/src/assets/images/account/account_about.png">
      </cell>
    </group>

    <div style="height:75px;"></div>

    <myTabbar></myTabbar>
  </div>
</template>

<script>
import VueRouter from '../router/routes.js'
import myTabbar from '../components/tabbar/Tabbar.vue'
import App from '../App'
import { XHeader, Card, Masker, Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'Home',
  components: {
    myTabbar: myTabbar,
    App,
    XHeader,
    Card,
    Masker,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Badge
  },
  data () {
    return {
      msg: 'Welcome to Home'
    }
  },
  methods: {
    toAccountSet () {
      VueRouter.push({
        path: '/accountSet'
      })
    },
    toApiMyCall () {
      VueRouter.push({
        path: '/apiMyCall'
      })
    },
    toAccountMessage () {
      VueRouter.push({
        path: '/accountMessage'
      })
    },
    toAccountBack () {
      VueRouter.push({
        path: '/accountBack'
      })
    },
    toApiMy () {
      VueRouter.push({
        path: '/apiMy'
      })
    },
    toApiApplyMy () {
      VueRouter.push({
        path: '/apiApplyMy'
      })
    },
    toAccountAbout () {
      VueRouter.push({
        path: '/accountAbout'
      })
    },
    toApiLike () {
      VueRouter.push({
        path: '/apiLike'
      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<style scoped lang="less">
  @import '~vux/src/styles/1px.less';

  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;
  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .card-demo-flex span {
    color: #f74c31;
  }
</style>
<style lang="less">
  .m-img {
    padding-bottom: 33%;
    display: block;
    position: relative;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    border-radius: 2px;
  }

  .m-title {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
  }

  .m-time {
    font-size: 12px;
    padding-top: 4px;
    border-top: 1px solid #f0f0f0;
    display: inline-block;
    margin-top: 5px;
  }
</style>
